<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title="详情"
      width="70%"
      @close="closeDialog()"
    >
      <json-viewer  copyable expand-depth="10" :value="jsonBody"></json-viewer>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
const emits = defineEmits(["update:visible"]);
const jsonBody = ref({});

const props = defineProps({
  visible: Boolean,
  data: String,
});

onMounted(() => {
  jsonBody.value = JSON.parse(props.data);
});

const closeDialog = () => {
  updateVisible(false);
};

const updateVisible = (value) => {
  emits("update:visible", value);
};
</script>
